<template>
  <div id="accidentStat" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">事故管理</BreadcrumbItem>
				<BreadcrumbItem to="/accident/stat">事故统计</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>{{tabflag==='0'?'按事故类型':'按涉事司机'}}导出</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="统计日期">
              <Button :class="{'ivu-btn-primary':twelveMonthActive}" @click="twelveMonthClick">最近12个月</Button>
              <DatePicker v-model="searchYear" type="year" :options="yearOption" :editable="false" :clearable="false" placement="bottom-end" transfer placeholder="选择年" style="width:150px;"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main" style="position:relative;">
      <Tabs type="card" v-model="tabflag" :animated="false">
        <TabPane name="0" label="按事故类型统计">
          <div class="table-content">
						<div class="table" style="margin-top:0;">
							<table>
								<thead>
									<th>事故类型</th>
									<th>次数</th>
									<th>已处理</th>
									<th>未处理</th>
								</thead>
								<tbody>
                  <tr v-for="(v,i) in typeList" :key="`accidentStat-t-list-key-${i}`">
                    <td>{{['双车剐蹭','部件失效','追尾碰撞','车辆颠覆'][v.accidentType-1]}}</td>
                    <td><a @click="goType(v.accidentType)">{{v.frequency}}</a></td>
                    <td><a @click="goType(v.accidentType,'1')">{{v.handleCount}}</a></td>
                    <td><a @click="goType(v.accidentType,'0')">{{v.noHandle}}</a></td>
                  </tr>
                  <tr v-if="!isLoading && typeList.length <= 0">
                    <td colspan="4">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
					</div>
        </TabPane>
        <TabPane name="1" label="按涉事司机统计">
          <div class="table-content">
						<div class="table" style="margin-top:0;">
							<table>
								<thead>
									<th>涉事司机</th>
									<th>次数</th>
									<th>已处理</th>
									<th>未处理</th>
								</thead>
								<tbody>
                  <tr v-for="(v,i) in driverPagedata.thisPageElements" :key="`accidentStat-d-list-key-${i}`">
                    <td>{{v.driverName}}</td>
                    <td><a @click="goDriver(v.driverId,v.driverName)">{{v.frequency}}</a></td>
                    <td><a @click="goDriver(v.driverId,v.driverName,'1')">{{v.handleCount}}</a></td>
                    <td><a @click="goDriver(v.driverId,v.driverName,'0')">{{v.noHandle}}</a></td>
                  </tr>
                  <tr v-if="!isLoading && driverPagedata.totalNumberOfElements <= 0">
                    <td colspan="4">暂无数据</td>
                  </tr>
								</tbody>
							</table>
						</div>
            <Page :total="driverPagedata.totalNumberOfElements" :page-size="pageSize" :current="current" @on-change="loadPage" show-total></Page>
					</div>
        </TabPane>
      </Tabs>
      <Spin size="large" fix v-if="isLoading"></Spin>
    </div>

  </div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import {download} from '@/util/request'

  export default {
    data(){
      return {
        twelveMonthActive:true,
        searchYear:null,
        submitForm:{},
        yearOption:{
          disabledDate:(d)=>{
            return d > moment().toDate();
          }
        },
        tabflag:'0',
        current:1,
        pageSize:15,
      };
    },
    watch:{
      searchYear(v){
        if (v){
          this.twelveMonthActive = false;
        }
      }
    },
    computed:{
      ...mapState('accident/accidentStat',['typeList','driverPagedata','isLoading'])
    },
    methods:{
      ...mapActions('accident/accidentStat',['reload','reloadDriver']),
      twelveMonthClick(){
        this.twelveMonthActive = true;
        this.searchYear = null;
      },
      search(){
        this.submitForm = {year:this.searchYear?this.searchYear.getFullYear():null};
        this.current = 1;
        this.reload({...this.submitForm});
      },
      loadPage(i){
        this.current = i;
        this.reloadDriver({pageNum:this.current,pageSize:this.pageSize,...this.submitForm});
      },
      exportData(){
        if (this.tabflag === '0'){
          download('/base/stat/exportaccidentTypeList',this.submitForm);
        } else {
          download('/base/stat/exportDriverList',this.submitForm);
        }
      },
      goType(accidentType,process){
        let [sTime,eTime] = [null,null];
        if (!this.searchYear) {
          eTime = moment().format('YYYY-MM-DD');
          sTime = moment(eTime).subtract(1,'Y').add(1,'d').format('YYYY-MM-DD');
        } else {
          sTime = moment([this.searchYear.getFullYear(),0,1]).format('YYYY-MM-DD');
          eTime = moment(sTime).add(1,'Y').subtract(1,'d').toDate();
          eTime = (eTime>moment().toDate()?moment().toDate():eTime).format('YYYY-MM-DD');
        }
        let query = {accidentType,sTime,eTime};
        if (process) query.process = process;
        let router = {name:'accidentList',query};
        this.$router.push(router);
      },
      goDriver(driverId,driverName,process){
        let [sTime,eTime] = [null,null];
        if (!this.searchYear) {
          eTime = moment().format('YYYY-MM-DD');
          sTime = moment(eTime).subtract(1,'Y').add(1,'d').format('YYYY-MM-DD');
        } else {
          sTime = moment([this.searchYear.getFullYear(),0,1]).format('YYYY-MM-DD');
          eTime = moment(sTime).add(1,'Y').subtract(1,'d').toDate();
          eTime = (eTime>moment().toDate()?moment().toDate():eTime).format('YYYY-MM-DD');
        }
        let query = {driverId,driverName,sTime,eTime};
        if (process) query.process = process;
        let router = {name:'accidentList',query};
        this.$router.push(router);
      }
    },
    mounted(){
      this.search();
    }
  }
</script>
